<template>
  <div class="login">
    <div class="center-wrap">
      <h3 class="title">数字校园智慧化电力平台</h3>
      <div class="ipt-wrap">
        <el-button>自定义的按钮</el-button>
        <el-button type="primary">fds</el-button>

        <div class="user">
          <img src="@/assets/images/login/user.png" alt="" />
          <input
            type="text"
            placeholder="请输入用户名"
            v-model="params.username"
          />
        </div>
        <div class="psd">
          <img class="psd-icon" src="@/assets/images/login/psd.png" alt="" />
          <input
            placeholder="请输入密码"
            v-model="params.password"
            :type="password"
          />
          <img
            @click="password = 'password'"
            class="eye"
            v-if="password == 'text'"
            src="@/assets/images/login/show-pds-icon.png"
            alt=""
          />
          <img
            @click="password = 'text'"
            class="eye"
            v-else
            src="@/assets/images/login/close-eye.png"
            alt=""
          />
        </div>
        <div class="code">
          <img class="code-icon" src="@/assets/images/login/code.png" alt="" />
          <input type="text" placeholder="请输入验证码" />
          <img class="auth-code" src="@/assets/images/login/code.png" alt="" />
          <img
            class="refresh"
            type="text"
            src="@/assets/images/login/reset.png"
            alt=""
          />
        </div>
      </div>
      <div class="btn-wrap">
        <button @click="enterLogin">登 录</button>
        <span>忘记密码？</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
let params = reactive({ username: "hndx", password: "hndxhndx" });
let $router = useRouter();
let password = ref("password");
let user = ref<number>("");
let psd = ref<number>("123");
let code = ref<number>("");
console.log(aa, "aa");
let enterLogin = () => {
  http({ url: "/pclogin", data: params }).then((res) => {
    console.log(res, "登录res");
    if (res.code == 0) {
    }
  });
  $router.push("/user");
};
</script>
<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/images/login/login-bgc.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  .center-wrap {
    position: absolute;
    width: 595px;
    height: 610px;
    background: url("@/assets/images/login/center-bgc.png") no-repeat;
    background-size: 100% 100%;
    padding-left: 62px;
    padding-top: 74px;
    .title {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 39px;
      color: #ffffff;
    }
    .btn-wrap {
      display: flex;
      flex-direction: column;
      width: 470px;
      button {
        margin-top: 43px;
        margin-left: 11px;
        width: 453px;
        height: 55px;
        background: #61c8ff;
        border-radius: 4px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 29px;
        color: #012046;
        cursor: pointer;
      }
      span {
        margin-top: 15px;
        height: 23px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24px;
        color: #ffffff;
        align-self: flex-end;
        cursor: pointer;
      }
    }

    .ipt-wrap {
      padding-left: 11px;

      .user {
        margin-top: 38px;
        input {
          flex: 1;
          padding-right: 30px;
        }
        img {
          width: 23px;
          height: 25px;
        }
      }
      .psd,
      .code {
        margin-top: 20px;
      }
      .psd {
        display: flex;
        align-items: center;
        padding-right: 20px;

        .psd-icon {
          width: 21px;
          height: 27px;
        }
        input {
          width: 300px;
        }
        .eye {
          width: 29px;
          height: 17px;
          margin-left: 36px;
          cursor: pointer;
        }
      }
      .code {
        padding-right: 15px;
        .code-icon {
          width: 21px;
          height: 25px;
        }
        input {
          width: 260px;
          padding-right: 30px;
        }
        .auth-code {
          width: 85px;
          height: 31px;
          background: #f6f6f6;
          margin-right: 11px;
          flex-shrink: 0;
        }
        .refresh {
          width: 22px;
          height: 24px;
          flex-shrink: 0;
          cursor: pointer;
        }
      }
      .user,
      .psd,
      .code {
        width: 453px;
        height: 55px;
        background: rgba(1, 32, 70, 0.57);
        border-radius: 4px;
        border: 1px solid #61c8ff;
        display: flex;
        align-items: center;
        padding-left: 15px;
        input:focus {
          outline: none;
        }
        input {
          background: transparent;

          line-height: 40px;
          box-shadow: none;
          border: none;
          color: #ffffff;

          font-size: 24px;
          font-weight: 400;
          margin-left: 25px;
        }

        input::placeholder {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 24px;
          color: #ffffff;
          line-height: 65px;
          opacity: 0.3;
        }
      }
    }
  }
}
</style>
